<template>
    <el-dialog
     :close-on-click-modal="false"
     :visible.sync="visible"
     @close="close()"
     top="30px"
     center="center"
     width="30%">
     <el-form :model="staffData" ref="staffData" label-width="120px">
       <el-form-item label="员工工号" prop="workId" style="width: 100%">
         <el-input v-model="staffData.workId" disabled style="width:70%"></el-input>
       </el-form-item>
       <el-form-item label="员工姓名" prop="name" style="width: 100%">
         <el-input v-model="staffData.name" disabled style="width: 70%"></el-input>
       </el-form-item>
       <el-form-item label="员工职务" prop="position.name" style="width: 100%">
         <el-input v-model="staffData.position.name" disabled style="width: 70%"></el-input>
       </el-form-item>
       <el-form-item label="员工角色" style="width: 100%">
         <el-select v-model="roleId" style="width: 70%" placeholder="改变员工角色">
           <el-option
            v-for="item in rolesData"
            :key="item.id"
            :label="item.nameZh"
            :value="item.id">
           </el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button  type="primary" @click="staffDataSubmit">确定</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
  name: 'StaffPermissionTree',
  data() {
    return {
      visible: true,
      staffData: {},
      rolesData: [],
      newstaffrole: {},
      roleId: null
    }
  },
  props: {
    close: {
      type: Function
    }
  },
  mounted() {
    this.getrolesData()
  },
  methods: {
    // 初始化信息
    init(data) {
      this.visible = true
      if (data.position === null) {
        this.staffData = {
          id: data.id,
          workId: data.workId,
          name: data.name,
          position: {
            id: 0,
            name: null
          },
          posId: 0
        }
      } else {
        this.staffData = data
      }
      // console.log(' this.staffData', this.staffData)
    },
    // 获取角色信息
    getrolesData() {
      this.getRequest('/admin/roles').then((resp) => {
        if (resp) {
          this.rolesData = resp.data
        }
      })
    },
    // 修改角色
    staffDataSubmit() {
      this.newstaffrole = {
        eid: this.staffData.id,
        rid: this.roleId
      }
      this.postRequest('/admin/emp_role', this.newstaffrole).then((resp) => {
        if (resp) {
          this.visible = false
          this.$message.success(resp.msg)
        }
      }, console.error())
    }
  }
}
</script>

<style>
  .el-dialog{
    border-radius: 15px;
  }
</style>
